<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员成长中心 - 社交平台</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary: #165DFF;
            --primary-light: #E8F3FF;
            --secondary: #36CFC9;
            --secondary-light: #E6FFFA;
            --success: #52C41A;
            --success-light: #F6FFED;
            --warning: #FAAD14;
            --warning-light: #FFFBE6;
            --danger: #FF4D4F;
            --danger-light: #FFF2F0;
            --dark: #1D2129;
            --gray: #86909C;
            --light: #F2F3F5;
            --border: #E5E6EB;
            --shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
            --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12);
        }
        
        body {
            font-family: 'Inter', system-ui, -apple-system, sans-serif;
            background-color: #F7F8FA;
            color: var(--dark);
            line-height: 1.6;
        }
        
        .container {
            max-width: 1140px;
        }
        
        /* 导航栏样式 */
        .navbar {
            background-color: white;
            box-shadow: var(--shadow);
            padding: 0.75rem 1rem;
        }
        
        .navbar-brand {
            font-weight: 700;
            color: var(--primary);
            font-size: 1.5rem;
        }
        
        .nav-link {
            color: var(--dark);
            margin-left: 1rem;
            font-weight: 500;
            transition: color 0.2s;
        }
        
        .nav-link:hover, .nav-link.active {
            color: var(--primary);
        }
        
        /* 主内容区 */
        .main-content {
            padding: 2rem 0;
        }
        
        /* 会员等级卡片 */
        .level-card {
            background-color: white;
            border-radius: 16px;
            box-shadow: var(--shadow);
            padding: 2rem;
            margin-bottom: 2rem;
            position: relative;
            overflow: hidden;
        }
        
        .level-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 6px;
            background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
        }
        
        .level-header {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 2rem;
            margin-bottom: 1.5rem;
        }
        
        .level-avatar {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            border: 4px solid var(--primary-light);
            overflow: hidden;
            flex-shrink: 0;
            position: relative;
        }
        
        .level-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .level-badge {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: var(--primary);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            border: 3px solid white;
        }
        
        .level-info {
            flex: 1;
        }
        
        .user-name {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }
        
        .level-title {
            display: inline-block;
            padding: 0.25rem 1rem;
            background-color: var(--primary-light);
            color: var(--primary);
            border-radius: 20px;
            font-size: 0.9rem;
            font-weight: 500;
            margin-bottom: 1rem;
        }
        
        .level-stats {
            display: flex;
            flex-wrap: wrap;
            gap: 2rem;
            margin-bottom: 1rem;
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .stat-icon {
            width: 32px;
            height: 32px;
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--primary-light);
            color: var(--primary);
        }
        
        .stat-info {
            line-height: 1.3;
        }
        
        .stat-value {
            font-weight: 600;
        }
        
        .stat-label {
            font-size: 0.85rem;
            color: var(--gray);
        }
        
        /* 经验值进度条 */
        .exp-progress {
            margin-top: 1rem;
        }
        
        .progress-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.75rem;
        }
        
        .progress-title {
            font-weight: 500;
        }
        
        .progress-value {
            font-size: 0.9rem;
            color: var(--primary);
            font-weight: 500;
        }
        
        .progress-bar-container {
            height: 10px;
            background-color: var(--light);
            border-radius: 5px;
            overflow: hidden;
            margin-bottom: 0.5rem;
        }
        
        .progress-bar {
            height: 100%;
            background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
            border-radius: 5px;
            transition: width 0.5s ease;
        }
        
        .next-level {
            font-size: 0.9rem;
            color: var(--gray);
        }
        
        .next-level strong {
            color: var(--primary);
        }
        
        /* 等级特权 */
        .privileges-section {
            margin-bottom: 2rem;
        }
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }
        
        .section-title {
            font-size: 1.5rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .section-title i {
            color: var(--primary);
        }
        
        .section-more {
            color: var(--primary);
            font-size: 0.9rem;
            font-weight: 500;
            cursor: pointer;
        }
        
        .privileges-tabs {
            display: flex;
            border-bottom: 1px solid var(--border);
            margin-bottom: 1.5rem;
            overflow-x: auto;
            white-space: nowrap;
        }
        
        .privilege-tab {
            padding: 0.75rem 1.5rem;
            font-weight: 500;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.2s;
        }
        
        .privilege-tab.active {
            color: var(--primary);
            border-bottom-color: var(--primary);
        }
        
        .privileges-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.5rem;
        }
        
        .privilege-card {
            background-color: white;
            border-radius: 12px;
            padding: 1.5rem;
            box-shadow: var(--shadow);
            transition: transform 0.2s, box-shadow 0.2s;
            display: flex;
            flex-direction: column;
        }
        
        .privilege-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
        }
        
        .privilege-level {
            width: 36px;
            height: 36px;
            border-radius: 6px;
            background-color: var(--primary-light);
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            margin-bottom: 1rem;
        }
        
        .privilege-icon {
            width: 56px;
            height: 56px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }
        
        .privilege-icon.available {
            background-color: var(--primary-light);
            color: var(--primary);
        }
        
        .privilege-icon.locked {
            background-color: var(--light);
            color: var(--gray);
        }
        
        .privilege-title {
            font-weight: 600;
            font-size: 1.1rem;
            margin-bottom: 0.5rem;
        }
        
        .privilege-desc {
            font-size: 0.9rem;
            color: var(--gray);
            margin-bottom: 1rem;
            flex: 1;
        }
        
        .privilege-status {
            font-size: 0.85rem;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
            width: fit-content;
        }
        
        .privilege-status.available {
            background-color: var(--success-light);
            color: var(--success);
        }
        
        .privilege-status.locked {
            background-color: var(--light);
            color: var(--gray);
        }
        
        /* 成长记录 */
        .growth-section {
            margin-bottom: 2rem;
        }
        
        .growth-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 0.75rem;
            margin-bottom: 1.5rem;
        }
        
        .growth-filter {
            padding: 0.4rem 1.25rem;
            border-radius: 20px;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.2s;
            border: 1px solid var(--border);
        }
        
        .growth-filter.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        .growth-list {
            background-color: white;
            border-radius: 12px;
            box-shadow: var(--shadow);
            overflow: hidden;
        }
        
        .growth-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.25rem 1.5rem;
            border-bottom: 1px solid var(--border);
            transition: background-color 0.2s;
        }
        
        .growth-item:last-child {
            border-bottom: none;
        }
        
        .growth-item:hover {
            background-color: var(--light);
        }
        
        .growth-info {
            display: flex;
            align-items: center;
            gap: 1.25rem;
        }
        
        .growth-icon {
            width: 48px;
            height: 48px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
        }
        
        .growth-icon.task {
            background-color: var(--primary-light);
            color: var(--primary);
        }
        
        .growth-icon.interaction {
            background-color: var(--secondary-light);
            color: var(--secondary);
        }
        
        .growth-icon.event {
            background-color: var(--warning-light);
            color: var(--warning);
        }
        
        .growth-details {
            line-height: 1.4;
        }
        
        .growth-title {
            font-weight: 500;
        }
        
        .growth-time {
            font-size: 0.85rem;
            color: var(--gray);
        }
        
        .growth-exp {
            font-weight: 600;
            color: var(--success);
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        /* 等级升级路径 */
        .level-path-section {
            margin-bottom: 2rem;
        }
        
        .level-path {
            background-color: white;
            border-radius: 12px;
            box-shadow: var(--shadow);
            padding: 1.5rem;
            overflow: hidden;
        }
        
        .level-steps {
            display: flex;
            justify-content: space-between;
            position: relative;
            margin: 2rem 0;
        }
        
        .level-steps::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            height: 3px;
            background-color: var(--light);
            transform: translateY(-50%);
            z-index: 1;
        }
        
        .level-steps::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
            transform: translateY(-50%);
            z-index: 2;
        }
        
        .level-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            z-index: 3;
            width: 60px;
        }
        
        .step-marker {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            margin-bottom: 0.75rem;
            background-color: white;
            border: 3px solid var(--light);
            transition: all 0.3s;
        }
        
        .step-marker.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
            box-shadow: 0 0 0 4px var(--primary-light);
        }
        
        .step-marker.completed {
            background-color: var(--success);
            color: white;
            border-color: var(--success);
        }
        
        .step-label {
            font-size: 0.85rem;
            font-weight: 500;
            text-align: center;
        }
        
        /* 快速获取经验值 */
        .quick-exp-section {
            margin-bottom: 2rem;
        }
        
        .exp-tasks-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 1.5rem;
        }
        
        .exp-task-card {
            background-color: white;
            border-radius: 12px;
            box-shadow: var(--shadow);
            overflow: hidden;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        
        .exp-task-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
        }
        
        .task-header {
            padding: 1.25rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .task-type {
            font-size: 0.85rem;
            font-weight: 500;
            padding: 0.25rem 0.75rem;
            border-radius: 20px;
        }
        
        .task-type.daily {
            background-color: var(--primary-light);
            color: var(--primary);
        }
        
        .task-type.weekly {
            background-color: var(--secondary-light);
            color: var(--secondary);
        }
        
        .task-exp {
            display: flex;
            align-items: center;
            gap: 5px;
            font-weight: 500;
            color: var(--success);
        }
        
        .task-body {
            padding: 1.25rem;
        }
        
        .task-title {
            font-weight: 600;
            font-size: 1.1rem;
            margin-bottom: 0.75rem;
        }
        
        .task-desc {
            font-size: 0.9rem;
            color: var(--gray);
            margin-bottom: 1.25rem;
        }
        
        .task-action {
            width: 100%;
            padding: 0.6rem;
            border-radius: 8px;
            background-color: var(--primary);
            color: white;
            border: none;
            font-weight: 500;
            font-size: 0.95rem;
            cursor: pointer;
            transition: background-color 0.2s;
        }
        
        .task-action:hover {
            background-color: #0E42D2;
        }
        
        .task-action.completed {
            background-color: var(--success);
        }
        
        /* 响应式设计 */
        @media (max-width: 992px) {
            .privileges-grid, .exp-tasks-grid {
                grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
            }
            
            .level-steps {
                overflow-x: auto;
                padding-bottom: 1rem;
                justify-content: flex-start;
                gap: 3rem;
            }
            
            .level-steps::before, .level-steps::after {
                width: max-content;
                min-width: 100%;
            }
        }
        
        @media (max-width: 768px) {
            .level-header {
                gap: 1rem;
            }
            
            .level-stats {
                gap: 1rem;
            }
            
            .privileges-grid, .exp-tasks-grid {
                grid-template-columns: 1fr;
            }
            
            .growth-item {
                flex-direction: column;
                align-items: flex-start;
                gap: 1rem;
            }
            
            .growth-exp {
                align-self: flex-end;
            }
        }
        
        @media (max-width: 576px) {
            .level-card {
                padding: 1.5rem 1rem;
            }
            
            .level-avatar {
                width: 100px;
                height: 100px;
            }
            
            .section-title {
                font-size: 1.25rem;
            }
            
            .privilege-tab {
                padding: 0.75rem 1rem;
                font-size: 0.9rem;
            }
            
            .growth-info {
                flex-direction: column;
                align-items: flex-start;
                gap: 0.75rem;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg">
        <div class="container">
            <a class="navbar-brand" href="#">社交平台</a>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fas fa-home me-1"></i> 首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fas fa-compass me-1"></i> 发现</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="#"><i class="fas fa-graduation-cap me-1"></i> 成长中心</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="fas fa-coins me-1"></i> 积分</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#"><i class="far fa-user me-1"></i> 我的</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    
    <div class="container main-content">
        <!-- 会员等级卡片 -->
        <div class="level-card">
            <div class="level-header">
                <div class="level-avatar">
                    <img src="https://picsum.photos/200/200?random=1" alt="用户头像">
                    <div class="level-badge">6</div>
                </div>
                
                <div class="level-info">
                    <div class="user-name">星辰大海</div>
                    <div class="level-title">钻石会员 Lv.6</div>
                    
                    <div class="level-stats">
                        <div class="stat-item">
                            <div class="stat-icon">
                                <i class="fas fa-star"></i>
                            </div>
                            <div class="stat-info">
                                <div class="stat-value">8,450</div>
                                <div class="stat-label">当前经验值</div>
                            </div>
                        </div>
                        
                        <div class="stat-item">
                            <div class="stat-icon">
                                <i class="fas fa-calendar-check"></i>
                            </div>
                            <div class="stat-info">
                                <div class="stat-value">128</div>
                                <div class="stat-label">连续活跃天数</div>
                            </div>
                        </div>
                        
                        <div class="stat-item">
                            <div class="stat-icon">
                                <i class="fas fa-trophy"></i>
                            </div>
                            <div class="stat-info">
                                <div class="stat-value">24</div>
                                <div class="stat-label">获得成就数</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="exp-progress">
                <div class="progress-header">
                    <div class="progress-title">距离下一等级还需</div>
                    <div class="progress-value">1,550 / 10,000 经验值</div>
                </div>
                
                <div class="progress-bar-container">
                    <div class="progress-bar" style="width: 84.5%;"></div>
                </div>
                
                <div class="next-level">
                    下一等级：<strong>铂金会员 Lv.7</strong>，升级可解锁 <strong>专属客服</strong> 和 <strong>内容优先推荐</strong> 特权
                </div>
            </div>
        </div>
        
        <!-- 等级升级路径 -->
        <div class="level-path-section">
            <div class="section-header">
                <h2 class="section-title">
                    <i class="fas fa-road"></i> 等级升级路径
                </h2>
            </div>
            
            <div class="level-path">
                <div class="level-steps" style="--progress: 60%">
                    <div class="level-step">
                        <div class="step-marker completed">1</div>
                        <div class="step-label">新手</div>
                    </div>
                    
                    <div class="level-step">
                        <div class="step-marker completed">2</div>
                        <div class="step-label">进阶</div>
                    </div>
                    
                    <div class="level-step">
                        <div class="step-marker completed">3</div>
                        <div class="step-label">资深</div>
                    </div>
                    
                    <div class="level-step">
                        <div class="step-marker completed">4</div>
                        <div class="step-label">专家</div>
                    </div>
                    
                    <div class="level-step">
                        <div class="step-marker completed">5</div>
                        <div class="step-label">大师</div>
                    </div>
                    
                    <div class="level-step">
                        <div class="step-marker active">6</div>
                        <div class="step-label">钻石</div>
                    </div>
                    
                    <div class="level-step">
                        <div class="step-marker">7</div>
                        <div class="step-label">铂金</div>
                    </div>
                    
                    <div class="level-step">
                        <div class="step-marker">8</div>
                        <div class="step-label">黄金</div>
                    </div>
                    
                    <div class="level-step">
                        <div class="step-marker">9</div>
                        <div class="step-label">王者</div>
                    </div>
                    
                    <div class="level-step">
                        <div class="step-marker">10</div>
                        <div class="step-label">传说</div>
                    </div>
                </div>
                
                <script>
                    // 设置进度条宽度
                    document.querySelector('.level-steps::after').style.width = '60%';
                </script>
            </div>
        </div>
        
        <!-- 等级特权 -->
        <div class="privileges-section">
            <div class="section-header">
                <h2 class="section-title">
                    <i class="fas fa-crown"></i> 等级特权
                </h2>
                <div class="section-more">查看全部 <i class="fas fa-angle-right ml-1"></i></div>
            </div>
            
            <div class="privileges-tabs">
                <div class="privilege-tab active">全部特权</div>
                <div class="privilege-tab">已解锁</div>
                <div class="privilege-tab">未解锁</div>
                <div class="privilege-tab">专属活动</div>
            </div>
            
            <div class="privileges-grid">
                <!-- 已解锁特权 -->
                <div class="privilege-card">
                    <div class="privilege-level">2</div>
                    <div class="privilege-icon available">
                        <i class="fas fa-ad"></i>
                    </div>
                    <h3 class="privilege-title">免广告体验</h3>
                    <p class="privilege-desc">浏览平台内容时不会显示任何广告，享受纯净体验</p>
                    <span class="privilege-status available">已解锁</span>
                </div>
                
                <div class="privilege-card">
                    <div class="privilege-level">4</div>
                    <div class="privilege-icon available">
                        <i class="fas fa-image"></i>
                    </div>
                    <h3 class="privilege-title">高清自定义封面</h3>
                    <p class="privilege-desc">可上传高清封面图片，自定义个人主页展示效果</p>
                    <span class="privilege-status available">已解锁</span>
                </div>
                
                <div class="privilege-card">
                    <div class="privilege-level">5</div>
                    <div class="privilege-icon available">
                        <i class="fas fa-pin"></i>
                    </div>
                    <h3 class="privilege-title">动态置顶</h3>
                    <p class="privilege-desc">每月可置顶3条重要动态，提高内容曝光率</p>
                    <span class="privilege-status available">已解锁</span>
                </div>
                
                <!-- 未解锁特权 -->
                <div class="privilege-card">
                    <div class="privilege-level">7</div>
                    <div class="privilege-icon locked">
                        <i class="fas fa-headphones"></i>
                    </div>
                    <h3 class="privilege-title">专属客服</h3>
                    <p class="privilege-desc">7×24小时专属客服服务，优先解决您的问题</p>
                    <span class="privilege-status locked">Lv.7解锁</span>
                </div>
                
                <div class="privilege-card">
                    <div class="privilege-level">8</div>
                    <div class="privilege-icon locked">
                        <i class="fas fa-rocket"></i>
                    </div>
                    <h3 class="privilege-title">内容优先推荐</h3>
                    <p class="privilege-desc">发布内容将获得优先推荐机会，提高内容影响力</p>
                    <span class="privilege-status locked">Lv.8解锁</span>
                </div>
                
                <div class="privilege-card">
                    <div class="privilege-level">10</div>
                    <div class="privilege-icon locked">
                        <i class="fas fa-user-shield"></i>
                    </div>
                    <h3 class="privilege-title">社区管理员</h3>
                    <p class="privilege-desc">获得社区管理权限，参与内容审核和社区建设</p>
                    <span class="privilege-status locked">Lv.10解锁</span>
                </div>
            </div>
        </div>
        
        <!-- 成长记录 -->
        <div class="growth-section">
            <div class="section-header">
                <h2 class="section-title">
                    <i class="fas fa-history"></i> 成长记录
                </h2>
                <div class="section-more">查看全部 <i class="fas fa-angle-right ml-1"></i></div>
            </div>
            
            <div class="growth-filters">
                <div class="growth-filter active">全部记录</div>
                <div class="growth-filter">任务完成</div>
                <div class="growth-filter">互动行为</div>
                <div class="growth-filter">活动参与</div>
                <div class="growth-filter">本周</div>
                <div class="growth-filter">本月</div>
            </div>
            
            <div class="growth-list">
                <div class="growth-item">
                    <div class="growth-info">
                        <div class="growth-icon task">
                            <i class="fas fa-tasks"></i>
                        </div>
                        <div class="growth-details">
                            <div class="growth-title">完成每日签到任务</div>
                            <div class="growth-time">今天 08:25</div>
                        </div>
                    </div>
                    <div class="growth-exp">
                        <i class="fas fa-plus-circle"></i> 20 经验
                    </div>
                </div>
                
                <div class="growth-item">
                    <div class="growth-info">
                        <div class="growth-icon interaction">
                            <i class="fas fa-comment"></i>
                        </div>
                        <div class="growth-details">
                            <div class="growth-title">发表优质评论被置顶</div>
                            <div class="growth-time">昨天 15:42</div>
                        </div>
                    </div>
                    <div class="growth-exp">
                        <i class="fas fa-plus-circle"></i> 50 经验
                    </div>
                </div>
                
                <div class="growth-item">
                    <div class="growth-info">
                        <div class="growth-icon task">
                            <i class="fas fa-share-alt"></i>
                        </div>
                        <div class="growth-details">
                            <div class="growth-title">完成每周分享任务</div>
                            <div class="growth-time">2023-06-18 19:30</div>
                        </div>
                    </div>
                    <div class="growth-exp">
                        <i class="fas fa-plus-circle"></i> 100 经验
                    </div>
                </div>
                
                <div class="growth-item">
                    <div class="growth-info">
                        <div class="growth-icon interaction">
                            <i class="fas fa-heart"></i>
                        </div>
                        <div class="growth-details">
                            <div class="growth-title">发布的动态获得50个点赞</div>
                            <div class="growth-time">2023-06-17 11:23</div>
                        </div>
                    </div>
                    <div class="growth-exp">
                        <i class="fas fa-plus-circle"></i> 80 经验
                    </div>
                </div>
                
                <div class="growth-item">
                    <div class="growth-info">
                        <div class="growth-icon event">
                            <i class="fas fa-calendar-day"></i>
                        </div>
                        <div class="growth-details">
                            <div class="growth-title">参与周末话题活动</div>
                            <div class="growth-time">2023-06-15 20:15</div>
                        </div>
                    </div>
                    <div class="growth-exp">
                        <i class="fas fa-plus-circle"></i> 150 经验
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 快速获取经验值 -->
        <div class="quick-exp-section">
            <div class="section-header">
                <h2 class="section-title">
                    <i class="fas fa-bolt"></i> 快速获取经验值
                </h2>
            </div>
            
            <div class="exp-tasks-grid">
                <div class="exp-task-card">
                    <div class="task-header">
                        <span class="task-type daily">每日任务</span>
                        <div class="task-exp">
                            <i class="fas fa-star"></i> 30 经验
                        </div>
                    </div>
                    <div class="task-body">
                        <h3 class="task-title">发布一条原创动态</h3>
                        <p class="task-desc">分享你的生活或观点，发布一条原创动态内容，内容需积极健康</p>
                        <button class="task-action">去完成</button>
                    </div>
                </div>
                
                <div class="exp-task-card">
                    <div class="task-header">
                        <span class="task-type daily">每日任务</span>
                        <div class="task-exp">
                            <i class="fas fa-star"></i> 25 经验
                        </div>
                    </div>
                    <div class="task-body">
                        <h3 class="task-title">参与社区讨论</h3>
                        <p class="task-desc">评论5条其他用户的动态，与社区成员积极互动交流</p>
                        <button class="task-action">去完成</button>
                    </div>
                </div>
                
                <div class="exp-task-card">
                    <div class="task-header">
                        <span class="task-type weekly">每周任务</span>
                        <div class="task-exp">
                            <i class="fas fa-star"></i> 150 经验
                        </div>
                    </div>
                    <div class="task-body">
                        <h3 class="task-title">完成专题创作</h3>
                        <p class="task-desc">围绕本周话题创作一篇优质内容，优质内容将获得额外推荐</p>
                        <button class="task-action">去完成</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 特权标签切换
        document.querySelectorAll('.privilege-tab').forEach(tab => {
            tab.addEventListener('click', function() {
                document.querySelectorAll('.privilege-tab').forEach(t => {
                    t.classList.remove('active');
                });
                this.classList.add('active');
                // 这里可以添加筛选逻辑
            });
        });
        
        // 成长记录筛选
        document.querySelectorAll('.growth-filter').forEach(filter => {
            filter.addEventListener('click', function() {
                document.querySelectorAll('.growth-filter').forEach(f => {
                    f.classList.remove('active');
                });
                this.classList.add('active');
                // 这里可以添加筛选逻辑
            });
        });
        
        // 任务完成按钮
        document.querySelectorAll('.task-action').forEach(btn => {
            btn.addEventListener('click', function() {
                const taskCard = this.closest('.exp-task-card');
                const taskTitle = taskCard.querySelector('.task-title').textContent;
                const expValue = taskCard.querySelector('.task-exp').textContent.trim();
                
                if (this.textContent === '去完成') {
                    // 模拟任务完成
                    this.textContent = '已完成';
                    this.classList.add('completed');
                    
                    // 显示完成提示
                    alert(`恭喜！你已完成"${taskTitle}"，获得${expValue}`);
                    
                    // 这里可以添加更新经验值的逻辑
                }
            });
        });
        
        // 查看更多按钮
        document.querySelectorAll('.section-more').forEach(btn => {
            btn.addEventListener('click', function() {
                const sectionTitle = this.closest('.section-header').querySelector('.section-title').textContent.trim();
                alert(`跳转到${sectionTitle}的完整页面`);
            });
        });
    </script>
</body>
</html>
    
